import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js'
import gsap from 'gsap'
import * as dat from 'dat.gui'

var dir = false
// 场景
const scene = new THREE.Scene();
// 相机 （透视相机）  角度、宽高比、近端面、远端面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);

for (let i = 0; i < 50; i++) {
    // 几何体与材质
    const geometry = new THREE.BufferGeometry(1, 1, 1);
    const vertices = new Float32Array(9)
    for (let j = 0; j < 9; j++) {
        vertices[j] = Math.random() * 5
    }
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
    let color = new THREE.Color(Math.random(), Math.random(), Math.random())
    const material = new THREE.MeshBasicMaterial({
        color,
        // transparent设置为true 才可设置透明度
        transparent: true,
        opacity: 0.5
    });
    const cube = new THREE.Mesh(geometry, material);
    // 设置位置
    cube.position.set(0, 0, 0)
    scene.add(cube);
}

// 渲染
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

const controls = new OrbitControls(camera, renderer.domElement);
// 阻尼感   新增update()
controls.enableDamping = true

function render(time) {
    controls.update()
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

render();